/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    Navbar,
    Toolbar,
    Text,
    Button,
    IconButton,
    MenuList,
    MenuItem,
    useTheme,
    useToast,
    LayerLoading,
    Container,
    IconMoreVertical,
    IconArrowLeft,
    IconArrowRight,
    IconPackage,
    IconRefButton,
    Select,
    VerticalMenu,
    DdMenuItem,
    TwoHalfRightPanel
} from "customize-easy-ui-component";
import { Link as RouterLink } from "../routing/Link";
import {useContext} from "react";
import RoutingContext from "../routing/RoutingContext";
import useNewPipingUnitMutation from "./useNewPipingUnitMutation";
import {css} from "@emotion/react";
import {设备品种, 设备种类, 设备类别} from "../dict/eqpComm";
import {ContainLine, TransparentInput} from "../comp/base";
import {PreloadedQuery, usePreloadedQuery} from "react-relay/hooks";
import { NewPipingUnitQuery } from "./__generated__/NewPipingUnitQuery.graphql";
import {DeviceClassSelect} from "../device/DeviceClassSelect";

const graphql = require("babel-plugin-relay/macro");


interface NewPipingUnitProps {
    prepared: {
        myQuery: PreloadedQuery<NewPipingUnitQuery>;
    }
    id?: string;
    readOnly?: boolean;
    dt?:any;
    routeData: any;
}
//报错Cannot read property 'fetchKey' of undefined，因为myQuery为空的。
const NewPipingUnit: React.FunctionComponent<NewPipingUnitProps> = ({
                                                               prepared,
                                                                readOnly,
                                                                id,
                                                                dt=null,
                                                                routeData,
                                                            }) => {
    const theme = useTheme();
    const toast = useToast();
    const [editing, ] = React.useState(!readOnly|| true);
    const data = usePreloadedQuery<NewPipingUnitQuery>(
        graphql`
            query NewPipingUnitQuery(
                $pipe:ID!,
            ) {
                getDeviceSelf(id: $pipe){
                    id,oid,cod,type,sort,vart,svp,pa,cpa,vital,titl,
                    ... on Pipeline {
                        useu{ id,name, company{id,name}, person{id,name} },
                        level,matr,mdi,prs,temp
                    }
                }
            }
        `,
        prepared.myQuery,
    );

    const { getDeviceSelf:pipeEqp }=data;

    const [code, setCode] = React.useState<string>( '');
    const [eqp, setEqp] = React.useState<any>(pipeEqp);
    const {history } = useContext(RoutingContext);
    const {call:createEqpfunc,isInFlight, result:entry}= useNewPipingUnitMutation();

    //保存 编辑新的设备之后，要修正URL
    React.useEffect(() => {
        entry && ( history.push(`/pipeline/${routeData.params.pId}/` + entry));
    }, [entry, history,routeData.params.pId]);

    return (
        <TwoHalfRightPanel
            title={`加个新的管道单元`}
            back={
                <RouterLink href={`/pipeline/${routeData.params.pId}/`}>
                    <IconButton  noBind  icon={<IconArrowLeft />}
                                 variant="ghost"
                                 label="后退"
                                 size="md"
                                 css={{
                                     marginRight: theme.spaces.sm,
                                     [theme.mediaQueries.md]: {
                                         display: "none"
                                     }
                                 }}
                    />
                </RouterLink>
            }
            menu={
                <VerticalMenu>
                    <DdMenuItem label="功能待续"
                                onClick={(e) => {
                                }}/>
                </VerticalMenu>
            }
        >
            <div
                css={{
                    [theme.mediaQueries.md]: {
                        height: "auto",
                        display: "block"
                    }
                }}
            >
                <div
                    css={{  //控制小屏时的导航条底下的整个页面滚动。
                        flex: 1,
                        [theme.mediaQueries.md]: {
                            flex: "none"
                        }
                    }}
                >
                    <div>
                        <Container>
                            <ContainLine display={'使用单位:'}>
                                <TransparentInput readOnly value={eqp?.useu?.company.name || ''} />
                            </ContainLine>
                            <div
                                css={{
                                    paddingTop: theme.spaces.md,
                                    paddingBottom: theme.spaces.md
                                }}
                            >
                                    <div>
                                        <ContainLine display={'管道装置的名称:'}>
                                            <TransparentInput readOnly value={eqp?.titl || ''} />
                                        </ContainLine>
                                            <ContainLine display={'管道装置的监察识别码:'}>
                                                <TransparentInput readOnly
                                                                  autoFocus={true}
                                                                  placeholder="导入的情形可以不填写"
                                                                  value={eqp?.oid || ''}
                                                                  onChange={e => setEqp({...eqp, oid: e.currentTarget.value||undefined}) }
                                                />
                                            </ContainLine>
                                            <DeviceClassSelect  eqp={eqp} />
                                        </div>

                                   <div>
                                       <br/>
                                       <Text variant="h5">要新增加的管道单元是</Text>
                                        <div>
                                            <ContainLine display={'新的管道编号:'}>
                                                <TransparentInput
                                                    autoFocus={true}
                                                    placeholder="那一条管道单元"
                                                    value={code || ''}
                                                    onChange={e => setCode(e.currentTarget.value || '') }
                                                />
                                            </ContainLine>

                                        </div>

                                    </div>


                                {editing && <Button
                                    intent="primary"
                                    disabled={false}
                                    css={{ marginLeft: theme.spaces.sm }}
                                    onPress={() => {  //按钮里面看不到最新的input取值的。
                                        createEqpfunc(routeData.params.pId, code,{});
                                    }}
                                >
                                    生成新的管道单元
                                </Button>
                                }
                            </div>
                        </Container>
                    </div>
                </div>

            </div>
        </TwoHalfRightPanel>
    );
};


export default NewPipingUnit;
